<template>
	<view>
		<view class="u-flex user-box u-p-l-30 u-p-r-20">
			<view class="u-m-r-10 u-p-t-20" @click="login">
				<u-avatar :src="avatar" size="140"></u-avatar>
			</view>
			<view class="u-flex-1 u-p-l-20">
				<view class="u-font-18 u-p-b-20">{{nickname}}</view>		
				<view class="u-font-14 u-tips-color">ID：{{my_invite_code}}</view>
			</view>
		</view>

		<view class="u-m-t-30">
			<u-cell-group>
				<u-cell-item icon="car" title="待发货"></u-cell-item>
				<u-cell-item icon="bag" title="待收货"></u-cell-item>
				<u-cell-item icon="trash" title="退款售后"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="u-m-t-30">
			<u-cell-group>
			<u-cell-item icon="map" title="我的地址"></u-cell-item>
			<u-cell-item icon="star" title="我的收藏"></u-cell-item>	
			<button class="u-reset-button" open-type="contact"><u-cell-item icon="kefu-ermai" title="联系客服" ></u-cell-item></button>
			</u-cell-group>
		</view>
		
		<view class="u-m-t-30">
			<u-cell-group>
				<u-cell-item icon="file-text" title="用户隐私"></u-cell-item>
				<u-cell-item icon="file-text" title="用户协议"></u-cell-item>			
			</u-cell-group>
		</view>
		
		<view class="u-m-t-60" @click="loginOut">
			<u-cell-group>
				<u-cell-item icon="setting" title="退出登录"></u-cell-item>
			</u-cell-group>
		</view>
		<u-popup v-model="show" mode="center">
				<view class="u-p-t-30 u-p-l-20 u-p-r-20 u-p-b-20" style="width:500rpx;">
					<form @submit="submit">
						<view class="avatar-box">
							<button size="mini" class="avatar-button" plain open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
								<view class="avatar-image-box">
									<image class="avatar-image" :src="avatar"></image>
								</view>
							</button> 
						</view>
						
						<!-- 昵称输入 -->
						<view class="nickname-box">
						  <view class="nickname">
						    <input class="input" type="nickname" name="nickname" v-model="nickname" placeholder="Nickname" placeholder-style="color: #8e8e8e;">
						  </view>
						</view>
						
						<button form-type="submit" type="primary" style="margin-top: 40rpx;">修改信息</button>
						
					</form>
				</view>
		</u-popup>
	</view>
</template>

<script>
	var vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				show:false,
				avatar:'/static/default.png',
				nickname:'微信用户',
				my_invite_code:'...'
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){},
		// 监听 - 页面每次【显示时】执行（如：前进和返回）（页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面）
		onShow() {},
		// 监听 - 页面每次【隐藏时】执行（如：返回）
		onHide() {},
		// 监听 - 页面每次【卸载时】（一般用于取消页面上的监听器）
		onUnload(){},
		// 监听 - 页面下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				vk.userCenter.getCurrentUserInfo({
				  success: (res) => {
					// 成功后的逻辑
					this.nickname = res.userInfo.nickname?res.userInfo.nickname:"微信用户"
					this.avatar = res.userInfo.avatar?res.userInfo.avatar:'/static/default.png'
					this.my_invite_code = res.userInfo.my_invite_code?res.userInfo.my_invite_code:'XXXXXX'					
				  }
				});	
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/**
		 * 监听 - 点击右上角转发时 文档 https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage
		 * 如果删除onShareAppMessage函数，则微信小程序右上角转发按钮会自动变灰
		 */
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options={}){
				console.log("init: ",options);							
				let that = this;
				if (vk.checkToken()) {
				  vk.userCenter.getCurrentUserInfo({
				    success: (res) => {
				  	// 成功后的逻辑
				  		that.nickname = res.userInfo.nickname?res.userInfo.nickname:"微信用户"
				  		that.avatar = res.userInfo.avatar?res.userInfo.avatar:'/static/default.png'
				  		that.my_invite_code = res.userInfo.my_invite_code?res.userInfo.my_invite_code:'XXXXXX'					
				    }
				  });	
				}else{
					that.login()
				}									
			},
			onChooseAvatar(e) {
				const avatar = e.detail.avatarUrl 
				this.avatar = avatar;
				console.log(avatar)
			},
			async updateUserInfo(){
				if (!this.avatar || !this.nickname) {
					vk.toast("头像和昵称不能为空");
					return;
				}
				// 上传图片到云储存
				let dataJson = {};
				if (this.avatar.indexOf("https://") !== 0) {
					let uploadFileRes = await vk.uploadFile({
						filePath: this.avatar,
						fileType: "image"
					});
					dataJson.avatar = uploadFileRes.url;
				} else {
					dataJson.avatar = this.avatar;
				}
				dataJson.nickname = this.nickname;
				vk.userCenter.updateUser({
					data: dataJson,
					success: (data) => {
						console.log('登录成功')	
						this.show = false
					}
				});			
			},
			login() {
				let that = this;
				wx.requirePrivacyAuthorize({
					 success: () => {
					   // 用户同意授权
					   // 继续小程序逻辑
					   vk.userCenter.loginByWeixin({
					   	data:{},
					   	success: (data) => {
					   		if(data.userInfo.nickname){
					   			that.nickname = data.userInfo.nickname
								that.my_invite_code = data.userInfo.my_invite_code
					   		}
					   		if(data.userInfo.avatar){
					   			that.avatarUrl = data.userInfo.avatar
					   		}
							
					   	}
					   });
					  that.show= true
					 },
					 fail: () => {
						console.log("拒绝")
					 }, // 用户拒绝授权
					 complete: () => {}
				   })
			},
			close(){
				this.$refs.guimodal.close();
			},
			submit(e){
				this.nickname = e.detail.value.nickname;
				this.updateUserInfo();
			},
			loginOut() {
				this.avatar = '/static/default.png'
				this.nickname = '未登录'
				this._id = "..."
				this.my_invite_code = "..."
				vk.setVuex('$user.userInfo', {})
				vk.toast('您已经成功退出!')
			},
			pageTo(path) {
				vk.navigateTo(path);
			},
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #ededed;
}

	.ucenter-face {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-face-image {
		width: 100rpx;
		height: 100rpx;
	}

	.ucenter-line {
		height: 20rpx;
		background-color: #F6F7F8;
		margin: 16rpx 0;
	}

	.logoff {
		line-height: 88rpx;
		font-size: 28rpx;
	}

	.gui-list-title-text {
		line-height: 60rpx;
	}
	.menu-items{width:100rpx; height:100rpx; margin:20rpx 0; border-radius:100rpx;}
	.menu-icon{width:100rpx; line-height:40rpx; font-size:36rpx;}
	.menu-text{width:100rpx; line-height:30rpx; font-size:22rpx;}
	.modal-btns{line-height:88rpx; font-size:26rpx; text-align:center; width:200rpx;}
	.avatar{
		width: 140rpx;
		height: 140rpx;
	}
.user-box{
	background-color: #fff;
}

	.avatar-box{
		/* #ifndef APP-NVUE */
		display: flex;
		justify-content: center;
		/* #endif */
		.avatar-button{
			border: 0;
		}
		.avatar-image-box{
			width: 120rpx;
			height: 120rpx;
			background-color: #f3f3f3;
			border-radius: 50%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.avatar-image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			overflow: hidden;
		}
	}
	
	/* 昵称 */
	.nickname-box {
	  margin-top: 40rpx;
		.nickname {
			margin-top: 16rpx;
			width: 100%;
			padding: 26rpx 20rpx;
			border-radius: 10rpx;
			background-color: #F8F7F8;
		}
		.input {
			color: #080808;
		}
	}
</style>
